<template>
    <el-row :gutter="2">
        <el-col :span="24" style="display: flex;justify-content: space-between; margin-bottom: 10px;">
            <el-space :size="2" wrap>
                <el-input v-model="search" placeholder="搜索" style="max-width: 300px;" clearable />
                <el-button :icon="Search" @click="SearchHandler" plain />
            </el-space>
            <el-button :icon="Refresh" @click="RefreshTable" plain round />
        </el-col>
        <el-col :span="24">
            <el-table :data="TableData" max-height="70vh" v-loading="loading"
                :header-cell-style="{ background: '#f4f6f8' }" border>
                <el-table-column type="index" width="50" :header-cell-class-name="'custom-header'" />
                <el-table-column prop="avatar" label="头像" width="85" :header-cell-class-name="'custom-header'">
                    <!-- 获取当前列的数据然后赋值给avatar -->
                    <template #default="{ row }">
                        <n-avatar lazy :size="60"
                            fallback-src="https://07akioni.oss-cn-beijing.aliyuncs.com/07akioni.jpeg"
                            :src="row.avatar" />
                    </template>
                </el-table-column>
                <el-table-column prop="nickname" label="昵称" width="100" :header-cell-class-name="'custom-header'" />
                <el-table-column prop="email" label="邮箱" width="220" :header-cell-class-name="'custom-header'" />
                <el-table-column prop="gender" label="性别" width="60" :header-cell-class-name="'custom-header'">
                    <template #default="{ row }">
                        {{
        row.gender === 0 ? '男' :
            row.gender === 1 ? '女' : '秘密'
    }}
                    </template>
                </el-table-column>
                <el-table-column prop="register" label="注册时间" width="160" :header-cell-class-name="'custom-header'" />
                <el-table-column prop="age" label="年龄" width="60" :header-cell-class-name="'custom-header'" />
                <el-table-column prop="title" label="简介" :header-cell-class-name="'custom-header'" />
                <el-table-column prop="ip" label="IP地址" width="100" :header-cell-class-name="'custom-header'" />
                <el-table-column prop="roles" label="身份" width="110" align="center"
                    :header-cell-class-name="'custom-header'">
                    <template #default="{ row }">
                        <el-tag v-if="row.roles === 'SuperAdmin'" disable-transitions>超级管理员</el-tag>
                        <el-tag v-else-if="row.roles === 'Admin'" disable-transitions>管理员</el-tag>
                        <el-tag v-else disable-transitions>普通用户</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="roles" label="是否注销" width="110" align="center"
                    :header-cell-class-name="'custom-header'">
                    <template #default="{ row }">
                        <el-tag :type="row.is_delete === 0 ? 'success' : 'danger'" disable-transitions>{{ row.is_delete
        ===
        0 ?
        '正常' :
        '已注销' }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="权限控制" align="center">
                    <template #default="{ row }">
                        <el-space :size="10" wrap>
                            <el-switch v-model="row.is_talk" size="large" inline-prompt active-text="正常"
                                inactive-text="禁言" :active-value="0" :inactive-value="1"
                                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949" />
                            <el-button type="danger" :icon="Delete" @click="DeleteHandler(row)" link>删除</el-button>
                        </el-space>
                    </template>
                </el-table-column>
                <template #empty>
                    <el-empty description="暂无数据" />
                </template>
            </el-table>
        </el-col>
        <el-col :span="24">
            <el-pagination v-model:currentPage="currentPage" :page-sizes="[20, 40, 80, 100]"
                v-model:page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalItems"
                @size-change="handleSizeChange" @current-change="handleCurrentChange" hide-on-single-page
                class="pagination" />
        </el-col>
    </el-row>
</template>

<script setup>
import { ref } from 'vue';
import { ElSpace, ElSwitch, ElTag, ElInput, ElButton, ElIcon, ElRow, ElCol, ElTable, ElTableColumn, ElEmpty, ElPagination } from 'element-plus';
import { Refresh, Search, Edit, Delete } from '@element-plus/icons-vue';
import { NImageGroup, NAvatar } from 'naive-ui';
import { Info, SearchUserInfo, Del } from '@/Apis/modules/userinfo';
import UserInfoStore from '@/stores/modules/UserInfoStore'

const loading = ref(false)        // 懒加载赋值
const store = UserInfoStore();
// 动态渲染页面并筛选
const TableData = computed(() => {
    const start = (currentPage.value - 1) * pageSize.value;
    const end = start + pageSize.value;

    return store.info.slice(start, end);
});

// 异步获取数据
const GetUserInfo = async () => {
    loading.value = true;
    setTimeout(async () => {
        await Info();
        loading.value = false;
    }, 1000)
}

// 获取数据
onMounted(async () => await GetUserInfo());

// 刷新
const RefreshTable = async () => { await GetUserInfo() };

const currentPage = ref(1);       // 当前页码
const pageSize = ref(20);         // 每页显示的数据条
const totalItems = ref(0);        // 总数据条数
// 分页
const handleSizeChange = (val) => {
    pageSize.value = val;         // 更新每页显示的数据条数
    currentPage.value = 1;        // 重置当前页码为第一页
}
const handleCurrentChange = (val) => {
    currentPage.value = val;      // 更新当前页码
}

// 搜索
const search = ref('');
const SearchHandler = async () => {
    if (!search.value) return ElMessage.error("请输入关键词");
    await SearchUserInfo(search.value);
}

// 删除用户
const DeleteHandler = async (row) => {
    const data = row.id;
    ElMessageBox.confirm(
        '是否删除该用户?',
        '警告',
        {
            confirmButtonText: '确认',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(() => {
            // 发起删除请求
            Del(data).then(() => {
                // 删除成功后更新前端页面上的数据
                const index = store.info.findIndex(item => item.id === data);
                if (index !== -1) {
                    store.info.splice(index, 1); // 从 store 中移除对应的行数据
                }
            });
        })
        .catch(() => {
            return
        })
};
</script>

<style scoped>
.pagination {
    display: flex;
    justify-content: center;
    margin: 10px 0;
}
</style>